<template>
  <xh-pages :tabBar="true">
    <view class="pages-container">
      <!-- 帮助与分享 -->
      <view class="help-share-container">
        <button open-type="share" class="help" @tap="openWin({ url: '#help' })"></button>
        <button open-type="share" class="share" @tap="openWin({ url: '/pages/users/dealer/index' })"></button>
      </view>
      <!-- logo -->
      <view class="logo-container">
        <image class="logo" :src="siteInfo.web_home_logo ? siteInfo.web_home_logo : '/static/index-logo.png'" />
        <view class="desc-container">
          <view class="desc">
            <u-icon name="heart-fill" color="#FF7BA2"></u-icon>
            <view class="text">
              {{ siteInfo.match_home_desc ? siteInfo.match_home_desc : '在规定时间内，假装对方是你的情侣' }}
            </view>
            <u-icon name="heart-fill" color="#FF7BA2"></u-icon>
          </view>
          <view class="start">
            {{ siteInfo.match_home_desc2 ? siteInfo.match_home_desc2 : '开始匿名聊天吧' }}
          </view>
        </view>
      </view>
      <!-- 角色选择 -->
      <view class="role-container">
        <swiper class="swiper-container" previous-margin="35vw" next-margin="35vw" @change="hanldRole" :current="swiperCurrent">
          <swiper-item class="item" :class="{ 'active': 'nansheng' === roleActive }" @tap="changeRole(0)">
            <image class="logo" :src="siteInfo.match_home_man ? siteInfo.match_home_man : '/static/pic_boy@2x.png'" />
            <view class="text nansheng">
              我是男生
            </view>
          </swiper-item>
          <swiper-item class="item" :class="{ 'active': 'nvsheng' === roleActive }" @tap="changeRole(1)">
            <image class="logo"
              :src="siteInfo.match_home_woman ? siteInfo.match_home_woman : '/static/pic_girl@2x.png'" />
            <view class="text nvsheng">
              我是女生
            </view>
          </swiper-item>
        </swiper>
        <view class="mask-indicator">
          <image class="indicator" src="@/static/indicator.png"></image>
        </view>
      </view>
      <!-- 开始匹配按钮 -->
      <view class="match-container">
        <view class="match-desc">已成功匹配{{ siteInfo.web_home_num || '99999' }}对情侣</view>
        <view class="match-start" @tap="handleStartMatch">
          <view class="start">开始匹配</view>
          <view class="num" v-if="userinfo.is_vip">无限匹配</view>
          <view class="num" v-else>剩余{{ userinfo.match_total }}次</view>
          <view class="mask">
            <image class="mask-img" src="@/static/pic_artifact@2x.png"></image>
          </view>
        </view>
      </view>
      <!-- 开始匹配弹窗 -->
      <u-modal :show="matchModal.show" title="正在匹配中" confirmText="取消匹配" @confirm="handleConfirm">
        <view class="match-modal">
          <view class="match-online">
            在线人数：
            <text class="num">{{ matchModal.num }}</text>
          </view>
          <view class="match-ing">正在寻找另一半...</view>
          <view class="match-icon">
            <u-icon name="heart-fill" class="heartbeat" size="52" color="red"></u-icon>
          </view>
        </view>
      </u-modal>
    </view>
  </xh-pages>
</template>

<script setup lang="ts">
import { useSite } from '@/stores/site';
import { useUserStore } from '@/stores/user';
import { openWin, toast } from '@/utils/helpers';

const siteInfo = storeToRefs(useSite()).siteInfo
const userinfo = storeToRefs(useUserStore()).userInfo

const roleActive = ref('nansheng')
const matchModal = ref({
  show: false,
  num: 0
})
const swiperCurrent=ref(0);
const hanldRole = (e: any) => {
  const index = e?.detail?.current ?? 0
  roleActive.value = index == 1 ? 'nvsheng' : 'nansheng'
}
const changeRole=(index:number)=>{
  swiperCurrent.value=index;
}
// 设置页面分享
onShareAppMessage(() => {
  return {
    title: siteInfo.value.web_name,
    path: `/pages/index/index`,
  }
})

// 继续等待匹配
const matchIng = async (queue_id: number | string) => {
  if (!matchModal.value.show) {
    return;
  }
  const params = {
    queue_id
  }
  return await uni.$u.http.post('Matchs/matchIng', params).then((res: any) => {
    if ([500, 404, 0].includes(res?.code)) {
      toast(res?.msg ?? '网络错误')
      return;
    }
    if (res?.code == 200) {
      // 匹配成功
      setTimeout(() => {
        const url = `/pages/chat/index?room_id=${res?.data?.room_id}`;
        openWin({ url: url })
      }, 2000);
      matchModal.value.show = false
      toast(res?.msg ?? '网络错误')
    } else if (res?.code == 201) {
      // 继续等待匹配
      matchModal.value.num = res?.data?.num ?? 0
      setTimeout(() => {
        matchIng(queue_id)
      }, 2000);
    }
  }).catch(() => {
    matchModal.value.show = false
  })
}

// 开始匹配
const handleStartMatch = () => {
  uni.showLoading({
    title: '启动匹配中...'
  })
  const params = {
    role: roleActive.value === 'nansheng' ? '10' : '20'
  }
  uni.$u.http.post('Matchs/start', params).then((res: any) => {
    if (res?.code == 200) {
      // 队列ID
      const queue_id = res?.data?.queue_id
      // 加入队列成功
      matchModal.value.num = res?.data?.num ?? 0
      // 开启匹配弹窗
      matchModal.value.show = true
      // 等待匹配
      matchIng(queue_id)
    } else if (res?.code == 301) {
      toast(res?.msg ?? '网络错误')
      setTimeout(() => {
        openWin({ url: '/pages/users/index?t=1' }, 'reLaunch')
      }, 2000);
    } else {
      toast(res?.msg ?? '网络错误')
    }
  }).finally(() => {
    uni.hideLoading()
  })
}

// 取消匹配
const handleConfirm = () => {
  uni.showLoading({
    title: '请求中...'
  })
  uni.$u.http.post('Matchs/matchCancel').then((res: any) => {
    if ([500, 404, 0].includes(res?.code)) {
      toast(res?.msg ?? '网络错误')
      return;
    }
  }).finally(() => {
    uni.hideLoading();
    // 关闭匹配窗口
    matchModal.value.show = false
  })
}
const expiresQueue = () => {
  uni.$u.http.get('Index/expiresQueue').catch((e: any) => {
    uni.showModal({
      title: '温馨提示',
      content: e?.msg ?? '网络错误',
      showCancel: false,
    })
  })
}


onShow(() => {
  expiresQueue();
  uni.$emit('user::update')
  uni.setNavigationBarTitle({
    title: siteInfo.value.web_name
  })
})
</script>

<style lang="scss" scoped>
.pages-container {
  background-image: url('@/static/pic_bg_home.png');
  background-size: 100% 100%;
  height: 100%;

  .help-share-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 50rpx;
    gap: 10rpx;

    .help {
      width: 80rpx;
      height: 80rpx;
      background-image: url('@/static/btn_hand_normal@2x.png');
      background-size: 100% 100%;
      background-color: transparent !important;
      border: 0 !important;
      display: inline !important;
      margin: 0 !important;
      padding: 0 !important;

      &::after {
        border: 0 !important;
      }
    }

    .share {
      width: 120rpx;
      height: 70rpx;
      background-image: url('@/static/btn_share_normal@2x.png');
      background-size: 100% 100%;
      background-color: transparent !important;
      border: 0 !important;
      display: inline !important;
      margin: 0 !important;
      padding: 0 !important;

      &::after {
        border: 0 !important;
      }
    }
  }

  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20rpx;

    .logo {
      width: 430rpx;
      height: 120rpx;
    }

    .desc-container {
      font-size: 32rpx;
      color: #FF7BA2;
      font-weight: 700;
      margin-top: 10rpx;

      .desc {
        display: flex;

        .text {
          padding: 0 6rpx;
        }
      }

      .start {
        text-align: center;
      }
    }
  }

  .role-container {
    margin-top: 80rpx;
    position: relative;

    .swiper-container {
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0.4;

        .logo {
          width: 130rpx;
          height: 130rpx;
        }

        .text {
          margin-top: 10rpx;
          font-size: 24rpx;
        }

        .nansheng {
          color: #5260E1;
        }

        .nvsheng {
          color: #FF6997;
        }
      }

      .active {
        opacity: 1;

        .logo {
          width: 200rpx;
          height: 200rpx;
        }

        .text {
          font-size: 28rpx;
        }
      }
    }

    .mask-indicator {
      position: absolute;
      bottom: -30rpx;
      left: 0;
      right: 0;
      text-align: center;

      .indicator {
        width: 45rpx;
        height: 30rpx;
      }
    }
  }

  .match-container {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40rpx;

    .match-desc {
      color: #FF6997;
      margin-bottom: 20rpx;
    }

    .match-start {
      width: 100%;
      height: 130rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url('@/static/btn-bg.png');
      background-size: 100% 100%;
      position: relative;
      font-size: 30rpx;

      .start {
        color: #fff;
      }

      .num {
        color: #FCE899;
      }

      .mask {
        position: absolute;
        right: -20rpx;
        top: -20rpx;

        .mask-img {
          width: 160rpx;
          height: 65rpx;
        }
      }
    }
  }
}

.match-modal {
  .match-online {
    font-size: 30rpx;

    .num {
      color: red;
    }
  }

  .match-ing {
    margin-top: 10rpx;
    font-size: 30rpx;
  }

  .match-icon {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
  }
}

.heartbeat {
  animation: heartbeat 1s ease-in-out infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.75);
  }

  20% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.75);
  }

  60% {
    transform: scale(1);
  }

  80% {
    transform: scale(0.75);
  }

  100% {
    transform: scale(0.75);
  }
}
</style>
